<template>
  <div>
    <el-row>
      <el-col :offset="4" :span="10" class="search">
        <el-autocomplete
          @select="handleSelect"
          v-model="search"
          :select-when-unmatched="true"
          value-key="name"
          :fetch-suggestions="querySearch"
          prefix-icon="el-icon-search"
          placeholder="请输入用品类别"
          clearable
        >
          <template slot="append">
            <el-button @click="handleSelect" icon="el-icon-search">搜索</el-button>
          </template>
        </el-autocomplete>
      </el-col>
      <el-col :offset="6" :span="4" class="add">
        <el-button @click="addProductCategory" type="primary" icon="el-icon-circle-plus">添加用品类别</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table v-loading="load" :data="tableData" max-height="400" style="width: 100%">
        <el-table-column align="center" prop="id" label="类别编号"></el-table-column>
        <el-table-column align="center" prop="name" label="类别名称"></el-table-column>
        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">
            <span>{{ getTime(scope.row.gmtCreate) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改时间">
          <template slot-scope="scope">
            <span>{{ getTime(scope.row.gmtModified) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="ProductCategory">
            <el-button-group>
              <el-button
                size="small"
                @click="showProductCategory(ProductCategory.row)"
                icon="el-icon-search"
              ></el-button>
              <el-button
                size="small"
                @click="updateProductCategory(ProductCategory.row)"
                type="primary"
                icon="el-icon-edit"
              ></el-button>
              <el-button
                size="small"
                @click="deleteProductCategory(ProductCategory.row)"
                type="danger"
                icon="el-icon-delete"
              ></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog @close="categoryClose" title="用品类别信息" :visible.sync="show" :center="true">
      <el-form inline class="demo-table-expand">
        <el-form-item label="类别编号">
          <span>{{ productCategory.id }}</span>
        </el-form-item>
        <el-form-item label="类别名称">
          <span>{{ productCategory.name }}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ getTime(productCategory.gmtCreate) }}</span>
        </el-form-item>
        <el-form-item label="修改时间">
          <span>{{ getTime(productCategory.gmtModified) }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="修改类别信息" :visible.sync="updateShow" :center="true">
      <el-form :model="productCategory" status-icon ref="productCategory" label-width="100px">
        <el-form-item label="类别名称" prop="category">
          <el-input v-model="productCategory.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('productCategory')">修改</el-button>
          <el-button @click="resetForm('productCategory')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加用品类别" :visible.sync="addShow" :center="true">
      <el-form :model="productCategory" status-icon ref="productCategory" label-width="100px">
        <el-form-item label="类别名称" prop="category">
          <el-input v-model="productCategory.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSubmitForm('productCategory')">添加</el-button>
          <el-button @click="resetForm('productCategory')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Category",
  data: function() {
    return {
      tableData: [],
      pageSizes: [5, 10, 15, 20],
      total: 1,
      search: "",
      currPage: 1,
      pageSize: 5,
      load: true,
      show: false,
      updateShow: false,
      addShow: false,
      productCategory: {
        id: "",
        name: "",
        createTime: "",
        modifyTime: ""
      },
      empty: {
        id: "",
        name: "",
        createTime: "",
        modifyTime: ""
      }
    };
  },
  created() {
    this.initProductCategory();
  },
  methods: {
    getCategorys(currPage, pageSize, search) {
      if (search == null) {
        search = "";
      }
      let params = {
        category: {
          name: search
        },
        myPage: {
          currPage: currPage,
          pageSize: pageSize
        }
      };
      this.$myPost(
        this,
        "/category/after/categorys",
        (res) => {
          this.tableData = res.data.data.records;
          this.load = false;
          this.total = res.data.data.total;
        },
        params
      );
    },
    initProductCategory: function() {
      this.getCategorys(this.currPage, this.pageSize);
    },
    handleCurrentChange(val) {
      this.getCategorys(val, this.pageSize);
    },
    handleSizeChange(val) {
      this.getCategorys(this.currPage, val);
    },
    querySearch: function(queryString, cb) {
      const t = this;
      this.axios
        .post("/category/after/byName", {
          name: t.search
        })
        .then(res => {
          cb(res.data.data);
        })
        .catch(error => console.log(error));
    },
    handleSelect: function() {
      this.currPage = 1;
      this.getCategorys(this.currPage, this.pageSize, this.search);
    },
    getTime: function(time) {
      let date = new Date(time);
      return (
        date.getFullYear() +
        "-" +
        (parseInt(date.getMonth()) + 1) +
        "-" +
        date.getDate() +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds()
      );
    },
    addProductCategory: function() {
      this.addShow = true;
    },
    showProductCategory(row) {
      this.show = true;
      this.productCategory = row;
    },
    updateProductCategory(row) {
      this.updateShow = true;
      this.productCategory = this.$copy(row);
    },
    deleteProductCategory(row) {
      this.$myDelete(
        this,
        "/category/after/category?id=" + row.id,
        this.initProductCategory
      );
    },
    addMethod() {
      this.initProductCategory();
      this.productCategory.name = "";
      this.addShow = false;
    },
    updateMethod() {
      this.initProductCategory();
      this.productCategory.name = "";
      this.updateShow = false;
    },
    addSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$myPost(this, "/category/after/category", this.addMethod, {
            name: this.productCategory.name
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$myPut(
            this,
            "/category/after/category",
            this.updateMethod,
            this.productCategory
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    categoryClose() {
      console.log("hello");
      this.productCategory = this.empty;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>